<template>
	<view class="fl-s-s">
		<view class="w-1 fr-b-c set-item"  @click="chooseImage">
			<text class="left-title">头像</text>
			<view class="fr-s-c">
				<image :src="avatar" mode="aspectFill" class="circle" style="width: 96rpx; height: 96rpx;"></image>
				<image src="/static/images/user/normal_right_arrow.png" class="m-l-30" style="width: 12rpx; height: 22rpx;" ></image>
			</view>
		</view>
		<view class="w-1 fr-b-c set-item" @click="nickShow = true">
			<text class="left-title">昵称</text>
			<view class="fr-s-c">
				<text class="right-info">{{nickname}}</text>
				<image src="/static/images/user/normal_right_arrow.png" class="m-l-30" style="width: 12rpx; height: 22rpx;" ></image>
			</view>
		</view>
		<view class="w-1 fr-b-c set-item">
			<text class="left-title">用户编号</text>
			<text class="right-info">{{id}}</text>
		</view>
		<view class="w-1 fr-b-c set-item">
			<text class="left-title">手机号</text>
			<text class="right-info">{{mobile}}</text>
		</view>
		 <!-- @click="show=true" -->
		<view class="w-1 fr-b-c set-item" @click="copy">
			<text class="left-title">邀请码</text>
			<view class="fr-s-c">
				<text class="right-info">{{invitation_code}}</text>
				<image src="/static/images/user/share_code.png" class="m-l-10" style="width: 40rpx; height: 40rpx;" ></image>
			</view>
		</view>
		<u-popup bgColor="transparent" border-radius="30" v-model="nickShow" mode="center">
			<view class="fl-s-c relative"
				style="padding: 64rpx 30rpx; width: 624rpx; background: #FFFFFF; border-radius: 32rpx;">
				<text class="bold fs-42" style="color: #000000;">修改昵称</text>
				<image @click="nickShow = false" src="/static/images/user/close_pup.png" style="position: absolute; right: 36rpx; top: 36rpx; width: 29rpx; height: 29rpx;"></image>
				<input class="my-input w-1" v-model="inputval" type="text" placeholder="点击输入">
				<view class="fr-c sub-btn w-1 m-t-30" @click="subNick">提交</view>
			</view>
		</u-popup>
		<!-- 邀请弹窗 -->
			<u-mask :show="show" @click="show = false" class="fl-c" :custom-style="{background:'rgba(102, 102, 102, 0.4)'}">
					<Invite @closePup="show=false" :inviteCode="invitation_code"></Invite>
			</u-mask>
	</view>
</template>

<script>
	import Invite from '@/components/InvitePup/InvitePup'
	export default {
		data() {
			return {
				nickShow:false,
				show:false,
				nickname:'',
				inputval:'',
				avatar:'',
				mobile:'',
				invitation_code:'',
				id:''  // 用户id
			}
		},
		components: {
				 Invite
		 },
		 onLoad() {
			// this.nickname = uni.getStorageSync('nickname') || ''
			// this.avatar = uni.getStorageSync('avatar') || ''
			// this.mobile = uni.getStorageSync('mobile') || ''
			// this.id = uni.getStorageSync('id') || ''
			this.getInfo()
		 },
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.invitation_code,
				})
			},
			getInfo(){
				this.$get({
					url:'/Appuser/getUserInfo',
					data:{
						access_token:uni.getStorageSync('access_token')
					}
				}).then(res=>{
					console.log(res,'info')
					this.nickname = res.data.nickname || ''
					this.avatar = res.data.avatar || ''
					this.mobile = res.data.mobile || ''
					this.id = res.data.id || ''
					this.invitation_code = res.data.invitation_code
				})
			},
			async chooseImage() {
				//#ifdef APP-PLUS
				let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')
					console.log(result)
				if (result !== 1) return
				this.$store.state.isCAMERA = true
				// #endif
				
				uni.chooseImage({
					count: 1,
					success: async res => {
						var tempFilePaths = res.tempFilePaths
						const imgres = await this.$up({
							imageUrl:res.tempFilePaths
						})
						this.$post({
							url:'/Appuser/updateUser',
							data:{
								access_token:uni.getStorageSync('access_token'),
								avatar:imgres[0]
							}
						}).then(res=>{
							uni.hideLoading()
							uni.showToast({
								title:'修改成功',
								mask:true
							})
							this.avatar = imgres[0]
							uni.setStorageSync('avatar',imgres[0])
						})
					}
				})
			},
			subNick(){
				if(!this.inputval) return this.$u.toast('请输入昵称');
				this.$post({
					url:'/Appuser/updateUser',
					data:{
						access_token:uni.getStorageSync('access_token'),
						nickname:this.inputval
					}
				}).then(res=>{
					this.nickShow = false
					this.nickname = this.inputval
					uni.showToast({
						title:'修改成功',
						mask:true
					})
					uni.setStorageSync('nickname',this.nickname)
				})
			}
		}
	}
</script>

<style scoped>
.set-item{
	padding: 38rpx 30rpx;
	border-bottom: 2rpx solid #F4F4F4;
}
.left-title{
	font-size: 26rpx;
	font-family: Alibaba;
	color: #000000;
}
.right-info{
	font-size: 26rpx;
	font-family: Alibaba;
	color: #666666;
}
	.my-input{
		height: 104rpx;
		background: #F4F4F4;
		border-radius: 8rpx;
		padding: 0 32rpx;
		margin-top: 36rpx;
	}
	.sub-btn{
		height: 100rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58);
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		margin-top: 72rpx;
	}
</style>
